<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的红包</title>
    <!-- <base href="./static/zxkg_redbag/"> -->
    <link rel="stylesheet" href="common/lib/bootstrap/bootstrap.css" />
    <link rel="stylesheet" href="common/css/common.css" />
    <link rel="stylesheet" href="common/css/accountLeft.css" />
    <link rel="stylesheet" href="css/redbag.css" />
    <!--[if lte IE 8]>
    <script src="common/lib/html5/excanvas.js"></script>
    <script src="common/lib/html5/html5.js"></script>
    <![endif]-->
</head>

<body>
    <header>
        <div class="page-head-top">
            <div class="page-container  clearfix">
                <div class="page-top-left">
                    <a class="tel" href="tel:400-064-5188"><span>客服电话:</span>400-064-5188</a><i class="weix"></i><i class="sina"></i>
                </div>
                <div class="page-top-right clearfix">
                    <ul>
                        <!--    TODO   登录状态切换  start    -->
                        <!--<li class="offline"><a href="#">登录</a><a href="#" class="active">注册</a></li>-->
                        <li class="online">你好:<a href="#" class="active">小明</a><a href="#">退出</a></li>
                        <!--    TODO   登录状态切换  end    -->
                        <li><a class="icon-phone" href="#">手机客户端</a></li>
                        <li><a href="#">新手指引</a></li>
                        <li><a href="#">帮助中心</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="navigator">
            <div class="page-container clearfix">
                <nav>
                    <a href="#" class="logo"><img src="common/img/header/logo.png" alt="logo程诺金服，稳健透明创新" /></a>
                    <ul class="nav-link">
                        <li><a href="#" class="active">首页</a></li>
                        <li><a href="#">我的投资</a></li>
                        <li><a href="#">安全保障</a></li>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#" class="nav-btn">我的账户</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <section class="page-container">
        <h5 class="crumbs-nav">当前位置：程诺金服&gt;<a href="#">我的红包</a></h5>
        <div class="clearfix">
            <div class="account-left">
                <aside>
                    <dl>
                        <dt>我的账户</dt>
                        <dd><a href="#">账户概览</a></dd>
                        <dd><a href="#">安全中心</a></dd>
                        <dd><a href="#">邀请好友</a></dd>
                        <dd><a href="#">消息中心</a></dd>
                        <dd><a href="#">我的收藏</a></dd>
                    </dl>
                    <dl>
                        <dt>我的资产</dt>
                        <dd><a href="#">充<span class="em-length-2"></span>值</a></dd>
                        <dd><a href="#">提<span class="em-length-2"></span>现</a></dd>
                        <dd><a href="#">资金流水</a></dd>
                        <dd class="active"><a href="#">红<span class="em-length-2"></span>包</a></dd>
                    </dl>
                    <dl>
                        <dt>我的投资</dt>
                        <dd><a href="#">投资列表</a></dd>
                        <dd><a href="#">债权转让</a></dd>
                    </dl>
                </aside>
            </div>
            <div class="account-right">
                <div>
                    <h1 class="redbag-title">我的红包</h1>
                </div>
                <div class="my-redbag">
                    <table>
                        <thead>
                            <tr>
                                <th></th>
                                <th><img src="img/redbag/djq.png">代金券红包</th>
                                <th><img src="img/redbag/jxq.png">加息券红包</th>
                                <th><img src="img/redbag/tyj.png">体验金红包</th>
                                <th><img src="img/redbag/xj.png">现金红包</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>未使用个数</td>
                                <td>0个</td>
                                <td>0个</td>
                                <td>0个</td>
                                <td>0个</td>
                            </tr>
                            <tr>
                                <td>未使用金额</td>
                                <td>0元</td>
                                <td>0%</td>
                                <td>0元</td>
                                <td>0元</td>
                            </tr>
                            <tr>
                                <td>已使用金额</td>
                                <td>0元</td>
                                <td>0%</td>
                                <td>0元</td>
                                <td>0元</td>
                            </tr>
                            <tr>
                                <td>已过期金额</td>
                                <td>50个</td>
                                <td>0.00%</td>
                                <td>100元</td>
                                <td>0.00元</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div>
                    <h1 class="redbag-title">红包列表</h1>
                </div>
                <div class="redbag-list">
                    <div class="state"><span>红包状态：</span><a class="active" href="javascript:void(0);">全部</a><a href="javascript:void(0);">未使用</a><a href="javascript:void(0);">已使用</a><a href="javascript:void(0);">已过期</a><a id="loadData" href="javascript:void(0);">加载数据</a></div>
                    <table>
                        <thead>
                            <tr>
                                <th>金额</th>
                                <th>名称</th>
                                <th>获得时间</th>
                                <th>生效时间</th>
                                <th>过期时间</th>
                                <th>最小投资额（元）</th>
                                <th>来源</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody id="redbagTable">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="footer-top">
            <ul>
                <li><a href="#" class="active">首页</a></li>
                <li><a href="#">我的投资</a></li>
                <li><a href="#">安全保障</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">我的账户</a></li>
            </ul>
        </div>
        <div class="footer-middle">
            <div class="page-container">
                <div class="footer-middle-item footer-middle-left">
                    <span class="icon-tel">客服热线：</span>
                    <strong class="tel-number">400-064-5188</strong>
                    <span class="work-time">工作日：9:00-18:00</span>
                </div>
                <div class="footer-middle-item footer-middle-center">
                    <div class="code-item">
                        <h3>官方微信</h3>
                        <img width="94" height="94" src="common/img/footer/weix.png" alt="官方微信二维码" />
                    </div>
                    <div class="code-item">
                        <h3>程诺APP</h3>
                        <img width="94" height="94" src="common/img/footer/app.png" alt="程诺APP二维码" />
                    </div>
                </div>
                <div class="footer-middle-item footer-middle-right">
                    <dl>
                        <dt><a href="#">关于程诺</a></dt>
                        <dd><a href="#">程诺介绍</a></dd>
                        <dd><a href="#">媒体报道</a></dd>
                        <dd><a href="#">招贤纳士</a></dd>
                    </dl>
                    <dl>
                        <dt><a href="#">安全保障</a></dt>
                        <dd><a href="#">资金安全</a></dd>
                        <dd><a href="#">技术保障</a></dd>
                        <dd><a href="#">风控体系</a></dd>
                    </dl>
                    <dl>
                        <dt><a href="#">帮助中心</a></dt>
                        <dd><a href="#">新手指引</a></dd>
                        <dd><a href="#">相关法律</a></dd>
                    </dl>
                </div>
            </div>
        </div>
    </footer>
    <script id="redbagList" type="text/html">
        {{each list as item index}}
        <tr>
            <td>{{item.cash}}</td>
            <td>{{item.title}}</td>
            <td>{{item.getTime.date}}<br/>{{item.getTime.time}}</td>
            <td>{{item.activeTime.date}}<br/>{{item.activeTime.time}}</td>
            <td>{{item.overdueTime.date}}<br/>{{item.overdueTime.time}}</td>
            <td>{{item.minCash}}</td>
            <td>{{item.from}}</td>
            <td>{{item.status}}</td>
        </tr>
        {{/each}}
    </script>
    <script src="common/lib/jquery/jquery-1.11.1.min.js"></script>
    <script src="common/lib/bootstrap/bootstrap.js"></script>
    <script src="common/lib/template/template.js"></script>
    <script src="common/js/common.js"></script>
    <script src="js/redbag.js"></script>
</body>

</html>
